<template>
  <div id="announcement">
    <!--信息公告-->
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="announcement-c" style="padding-right: 20px;">
            <div class="announcement-c-c" style="border-top: 4px solid #22944E;">
              <div class="announcement-title" style="color: #22944E;">
                信息公告
                <img src="@/assets/images/home/label1.png" alt="">
                <img src="@/assets/images/home/more2.png" alt="" @click="toPath('notice')">
              </div>
              <ul>
                <li v-for="item in list1" @click="openInfo(item)">
                  <span>•</span>
                  <span class="ccsl">{{item.bt}}</span>
                  <span style="float: right">{{item.createTime}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div class="announcement-c" style="padding-left: 20px;">
            <div class="announcement-c-c" style="border-top: 4px solid #3C88DC;">
              <div class="announcement-title" style="color: #22944E;">
                法规资料
                <img src="@/assets/images/home/label2.png" alt="">
                <img src="@/assets/images/home/more2.png" alt="" @click="toPath('questionBank')">
              </div>
              <ul>
                <li v-for="item in list2" @click="openInfo(item)">
                  <span>•</span>
                  <span class="ccsl">{{item.name}}</span>
                  <span style="float: right">{{times}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!--内容-->
    <div class="black-block" v-if="nowHtmlShow">
      <div class="cen">
        <p>{{info.bt || info.name}}</p>
        <i class="el-icon-close" @click="nowHtmlShow = false,info = {}"></i>
        <div>{{info.nr||info.intro}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {queryInfoDocI,selectInfoList} from '@/request/api'
  import {formatDate} from '@/utils'
  export default {
    name: 'announcement',
    data () {
      return {
        list1: [
        ],
        list2: [
        ],
        nowHtmlShow: false,
        type: 0,
        info: {},
        times :formatDate(new Date()),
      }
    },
    created() {
      this.getList2()
      this.getList1()
    },
    methods: {
      getList1() {
        let paramster = {
          "_search": true,
          "bgTm": "",
          "endTm": "",
          "pageNumber": 1,
          "pageSize": 5
        }
        selectInfoList(paramster).then(res=> {
          if(res.code == 200) {
            this.list1 = res.data.records
          }
        }).catch(() => {
        })
      },
      getList2() {
        let paramster = {
          "_search": true,
          "bgTm": "",
          "data": {
            "courseCount": '',
            "del": '',
            "id": '',
            "intro": "",
            "name": ""
          },
          "endTm": "",
          "pageNumber":1,
          "pageSize": 5
        }
        queryInfoDocI(paramster).then(res=> {
          if(res.code == 200) {
            this.list2 = res.data.records
          }
        }).catch(() => {
        })
      },
      toPath(name) {
          this.$router.push({
            name:name
          })
      },
      openInfo(item) {
        this.info = item
        this.nowHtmlShow = true
      }
    }
  }
</script>

<style scoped>
  #announcement {
    box-sizing: border-box;
  }
.announcement-c {
  width: 600px;
  height: 264px;
  display: inline-block;
  box-sizing: border-box;
}
.announcement-c-c {
  width: 100%;
  height: 100%;
  border: 1px solid #E5E5E5;
}
.announcement-title {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  padding-left: 62px;
  position: relative;
  border-bottom: 1px solid #E5E5E5;
}
  .announcement-title :first-child {
    position: absolute;
    left: 18px;
    top: -4px;
  }
  .announcement-title :last-child {
    position: absolute;
    right: 30px;
    top: 14px;
  }
  ul {
    padding-left: 0;
    margin-top: 20px;
    margin-left: 20px;
  }
  li {
    line-height: 20px;
    height: 20px;
    font-size: 16px;
    color: #666666;
    margin-bottom: 15px;
    list-style:none;
    position: relative;
    padding-left: 12px;
  }
  li :first-child {
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
  }
  li :nth-child(2) {
    width: 350px;
    display: inline-block;
  }
  li :last-child {
    margin-right: 20px;
  }
  li:hover {
    cursor:pointer;
  }
</style>
